/**
 * 自定义路由：
 * 1、window.history
 * 2、render
 * 3、slot
 * 4、组件传参
 * 5、class与style绑定
 */

import Vue from 'vue'

import "styles/app.scss";

import routes from './routes'

const vm = new Vue({
  el: '#root',

  data: {
    // 定义当前路径信息
    currentRoute: window.location.pathname
  },

  // 生成子路由组件
  computed: {
    ViewComponent() {
      // 根据路由找到匹配的组件名
      const matchingView = routes[this.currentRoute]

      // 返回组件对象
      return matchingView
        ? require(`./pages/${matchingView}.vue`)
        : require('./pages/404.vue')
    },

    mounted() {
      console.log(0);
    }
  },

  // 渲染组件
  render(h){
    return h(this.ViewComponent)
  }
})

window.addEventListener('popstate', function () {
  vm.currentRoute = window.location.pathname
}, false)
